<template>
	<view>
		<view class="swiper_bg"> 
			<swiper class="swiper" circular :indicator-dots="banner.indicatorDots" :autoplay="banner.autoplay" :interval="banner.interval"
								:duration="banner.duration">
				<swiper-item v-for="(item,index) in huodong.zhutu" :key="index">
					<image class="banner" :src="item"></image>
				</swiper-item> 
			</swiper>
			<view style="width: 70rpx;height: 70rpx;float: left;margin-top: -470rpx;margin-left: 50rpx;border-radius: 60rpx;background-color: rgba(128, 128, 128, 0.5);z-index: inherit;position: fixed;">
				<image src="/static/detail_back.png" style="width: 50rpx;height: 50rpx;margin-top: 10rpx;margin-left: 10rpx;" ></image>
			</view>
		</view>
		<view class="detail-info1">
			<view class="detail-info1-title">
				{{huodong.name}}
			</view>
			
			<view class="detail-info1-item" style="font-size: 20rpx;">
				时长690分钟<label style="margin-left: 20rpx;">开始前24小时无法取消</label>
				<view  style="float: right;font-size: 28rpx;">
					<label style="font-size: 35rpx;font-weight: bold;">￥{{huodong.minPrice}}</label>/人
				</view> 
			</view>
			<view class="detail-info1-item" style="font-size: 20rpx;border-top: 3rpx solid #666666;margin-top: 20rpx;padding-top: 20rpx;">
			  <image src="../../static/ic_xiaoxi.png" class="detail-info1-item-img"></image>&nbsp;{{huodong.endTime}}
			</view>
			<view class="detail-info1-item" style="font-size: 24rpx;">
				承办方：济宁心起点科技无限不公司
			</view>
			<view class="detail-info1-item" style="font-size: 20rpx;">
				<image src="../../static/ic_dizhi.png" class="detail-info1-item-img"></image>&nbsp;{{huodong.address}}
			</view>
			 
			<view style="width: 100%;height: 30rpx;float: left;"></view>
		</view>
		<view class="detail-info1"  >
			<view class="detail-info1-bm">
				<view class="detail-info1-bm-1"></view>当前报名人数：{{huodong.join}}/{{huodong.all}}
			</view>
		</view>
		<view class="detail-info1" style="font-size: 25rpx;"> 
			<view class="detail-info1-xq">
				 活动详情
			</view>
			<view style="width: 100%;height: 10rpx;float: left;"></view>
			<image v-for="(item,index) in huodong.tuwen" :key="index" :src="item" style="width: 100%;height: 500rpx;float: left;"></image>  
			<view style="width: 100%;height: 20rpx;float: left;"></view>
		</view> 
		<view style="width: 100%;height: 150rpx;float: left;"></view>
		<view style="position: fixed;bottom: 0rpx;left:0rpx;height: 130rpx;width: 100%;background: white;">
			<view @click="showModal" class="detail-buy">
				我要参加
			</view>
			<view class="detail-buy" style="width: 140rpx;height: 60rpx;line-height: 60rpx;font-size: 26rpx;margin-top: 40rpx;">
				活动分享
			</view>
		</view>
		<view v-if="modalVisible" class="modal-container">
		    <view class="modal-content">
				<view style="width: 100%;height: 60rpx;text-align: center;">
					请填写正确信息
				</view> 
				 
				<view class="modal-content-item">
					<view class="modal-content-item-lable">
						姓名：
					</view>
					<view class="modal-content-item-con">
						<input type="text" class="modal-content-item-int" placeholder="请输入姓名"/>
					</view>
				</view>
				<view class="modal-content-item">
					<view class="modal-content-item-lable">
						联系电话：
					</view>
					<view class="modal-content-item-con">
						<input type="text" class="modal-content-item-int" placeholder="请输入联系电话"/>
					</view>
				</view>
				<view class="modal-content-item">
					<view class="modal-content-item-lable">
						赠送保险：
					</view>
					<view class="modal-content-item-con"> 
						<view  class="modal-content-item-gg" >
							接受
						</view>	
						<view  class="modal-content-item-gg" >
							不接受
						</view>	
						<view style="width: 100%;height: 10rpx;float: left;"></view>
					</view>
				</view>
				<view class="modal-content-item" >
					<view class="modal-content-item-lable">
						身份证号：
					</view>
					<view class="modal-content-item-con">
						<input type="text" class="modal-content-item-int" placeholder="请输入身份证号"/>
					</view>
				</view>
				<view class="modal-content-item" style="border: none;margin-top: 40rpx;margin-bottom: 20rpx;">
					<view class="modal-content-item-btn" @click="closeModal">
						取消
					</view>
					<view class="modal-content-item-btn">
						立即下单
					</view>
				</view> 
		    </view>
		</view>
	</view>
</template>

<script setup>
	const modalVisible=ref(false);
	function showModal() {
	    modalVisible.value = true;
	}
	function closeModal() {
	    modalVisible.value = false;
	}
	const banner=ref({
		indicatorDots: true,
		autoplay: true,
		interval: 2000,
		duration: 500
	});
	const huodong=ref(
	{
		name:'一个活动一个活动一个活动一个活动',
		zhutu:['https://img1.baidu.com/it/u=2014567900,3853265186&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375','https://img0.baidu.com/it/u=1645154229,1628595150&fm=253&fmt=auto&app=120&f=JPEG?w=751&h=500','https://img1.baidu.com/it/u=2014567900,3853265186&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'],
		all:50,
		join:40,
		price:[
			{
				id:1,
				name:'成人票',
				price:40
			},
			{
				id:2,
				name:'儿童票',
				price:20
			},
			{
				id:3,
				name:'儿童票',
				price:20
			},
			{
				id:4,
				name:'儿童票',
				price:20
			}
		],
		time:'2024-06-14 12:00:00',
		endTime:'2024-06-13 12:00:00',
		address:'山东省济宁市任城区山东省济宁市任城区山东省济宁市任城区山东省济宁市任城区',
		minPrice:99,
		maxPrice:199,
		xiangQing:[
			{
				id:1,
				title:'思维口才体验课',
				info:[
					{
						id:1,
						title:'类型',
						content:'试听课'
					},
					{
						id:2,
						title:'课时',
						content:'90分钟/课时'
					},
					{
						id:3,
						title:'培养能力',
						content:'口才应用能力、探索能力与创造能力'
					},
					{
						id:4,
						title:'教学形式',
						content:'互动式教学法'
					},
					{
						id:5,
						title:'班型',
						content:'小班制，十人课堂'
					}
				]
			},
			{
				id:2,
				title:'再来一个标题',
				info:[
					{
						id:1,
						title:'类型',
						content:'试听课'
					},
					{
						id:2,
						title:'课时',
						content:'90分钟/课时'
					},
				]
			}
		],
		xuzhi:[
			{
				id:1,
				title:'温馨提示',
				info:[
					{
						id:1,
						content:'1、商户可能致电您，预约到店时间，请保持手机畅通。'
					},
					{
						id:2,
						content:'2、如需团购券发票，请您在消费时向商户咨询。'
					},
					{
						id:3,
						content:'3、为了保障您的权益，建议使用平台线上支付。若使用其他支付方式导致纠纷，平台不承担任何责任，感谢您的理解和支持！'
					}
				]
			},
			{
				id:2,
				title:'特别注意',
				info:[
					{
						id:1,
						content:'1、购买之后，不能退。'
					},
					{
						id:2,
						content:'2、购买之后，真的不能退。'
					},
					{
						id:2,
						content:'3、退款剁手。'
					}
				]
			}
		],
		tuwen:['https://img1.baidu.com/it/u=427726287,31046258&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=500','https://img1.baidu.com/it/u=427726287,31046258&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=500'],
	});
	const ggIndex=ref();
	function selectGg(item){
		ggIndex.value=item.id;
	}
</script>

<style>
	@import "./detail.scss"; 
</style>